<template>
  <div>
    <ElLine :title="'事项信息'" style="font-size: 20px" />
    <div style="padding: 0px 60px 60px 60px">
      <el-row style="margin: 30px 0">
        <el-col :span="12" class="info-item">
          <el-row>
            <el-col :span="8" class="info-label">
              <span>事项名称：</span>
            </el-col>
            <el-col :span="14" class="info-value">
              <span class="underline">{{ matterInfo.matterName }}</span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12" class="info-item">
          <el-row>
            <el-col :span="8" class="info-label">
              <span>事项类型：</span>
            </el-col>
            <el-col :span="14" class="info-value">
              <span class="underline">{{ matterInfo.workContentType == 0 ? '市场类' : '非市场类' }}</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="margin: 30px 0">
        <el-col :span="12" class="info-item">
          <el-row>
            <el-col :span="8" class="info-label">
              <span>事项负责人：</span>
            </el-col>
            <el-col :span="14" class="info-value">
              <span class="underline">{{ matterInfo.matterResponsible }}</span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12" class="info-item">
          <el-row>
            <el-col :span="8" class="info-label">
              <span>事项协同人：</span>
            </el-col>
            <el-col :span="14" class="info-value">
              <span class="underline">{{ matterInfo.collaborators }}</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="margin: 30px 0">
        <el-col :span="12" class="info-item">
          <el-row>
            <el-col :span="8" class="info-label">
              <span>事项关联人：</span>
            </el-col>
            <el-col :span="14" class="info-value">
              <span class="underline">{{ matterInfo.em2 }}</span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12" class="info-item">
          <el-row>
            <el-col :span="8" class="info-label">
              <span>事项所属部门：</span>
            </el-col>
            <el-col :span="14" class="info-value">
              <span class="underline">{{ matterInfo.dept }}</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="margin: 30px 0">
        <el-col :span="12" class="info-item">
          <el-row>
            <el-col :span="8" class="info-label">
              <span>关联的制度：</span>
            </el-col>
            <el-col :span="14" class="info-value">
              <span class="underline">{{ matterInfo.systemName }}</span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12" class="info-item">
          <el-row>
            <el-col :span="8" class="info-label">
              <span>关联的法律：</span>
            </el-col>
            <el-col :span="14" class="info-value">
              <span class="underline">{{ getRelatedLawName(matterInfo.relatedLawId).label }}</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="margin: 30px 0">
        <el-col :span="12" class="info-item">
          <el-row>
            <el-col :span="8" class="info-label">
              <span>是否列入重点工作：</span>
            </el-col>
            <el-col :span="14" class="info-value">
              <span class="underline">{{ matterInfo.isKeyWork == 0 ? '是' : '否' }}</span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12" class="info-item">
          <el-row>
            <el-col :span="8" class="info-label">
              <span>是否需要成立专班：</span>
            </el-col>
            <el-col :span="14" class="info-value">
              <span class="underline">{{ matterInfo.isSpecialTeamFormed == 0 ? '是' : '否' }}</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="margin: 30px 0">
        <el-col :span="12" class="info-item">
          <el-row>
            <el-col :span="8" class="info-label">
              <span>是否被催办：</span>
            </el-col>
            <el-col :span="14" class="info-value">
              <span class="underline">{{ matterInfo.dialogContent != '' ? '是' : '否' }}</span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12" class="info-item">
          <el-row>
            <el-col :span="8" class="info-label">
              <span>超期天数：</span>
            </el-col>
            <el-col :span="14" class="info-value">
              <span class="underline">{{ overdueDays }}天</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="margin: 30px 0">
        <el-col :span="12" class="info-item">
          <el-row>
            <el-col :span="8" class="info-label">
              <span>实现结果：</span>
            </el-col>
            <el-col :span="14" class="info-value">
              <span class="underline">成功</span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12" class="info-item">
          <el-row>
            <el-col :span="8" class="info-label">
              <span>是否完成：</span>
            </el-col>
            <el-col :span="14" class="info-value">
              <span class="underline">是</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {reactive, toRefs, ref, computed, watch, getCurrentInstance} from 'vue';

export default {
  name: 'matterInfo',
  props: {
    rowData: {
      type: Object,
      default: null
    }
  },
  setup(props) {
    const {proxy} = getCurrentInstance(); // 确保 proxy 获取正确
    const { related_law } = proxy.useDict('related_law');
    const initialMatterInfo = {
      matterName: '',
      workContentType: 0,
      matterResponsible: '',
      matterRelatedPersonId: '',
      matterRelatedPerson: '',
      dept: '',
      relatedPolicyId: '',
      relatedLawId: '',
      isKeyWork: 0,
      isSpecialTeamFormed: 0,
      dialogContent: '',
      completionDeadline: '' // 示例日期，实际应从服务器获取
    };
    const data = reactive({
      matterInfo: { ...initialMatterInfo }
    });

    const overdueDays = computed(() => {
      const completionDate = new Date(data.matterInfo.completionDeadline);
      const currentDate = new Date();
      const timeDiff = currentDate - completionDate;
      const dayDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
      return dayDiff > 0 ? dayDiff : 0;
    });

    watch(
        () => props.rowData,
        newRowData => {
          if (newRowData) {
            Object.assign(data.matterInfo, newRowData);
          } else {
            Object.assign(data.matterInfo, initialMatterInfo);
          }
        },
        { immediate: true }
    );

    // 监听 matterInfo.relatedLawId 的变化
    const getRelatedLawName = (relatedLawId) => {
      // 从字典中获取相关法律名称
      const law = related_law.value[relatedLawId];
      return law || '未知'; // 如果找不到对应的法律名称，返回 '未知'
    };

    return {
      ...toRefs(data),
      overdueDays,
      getRelatedLawName
    };
  }
};
</script>

<style scoped>
.info-item {
  font-size: 16px; /* 设置字体大小 */
}

.info-label {
  margin-right: 10px;
  text-align: right;
  font-size: 18px; /* 设置标签字体大小 */
}

.info-value {
  flex-grow: 1;
  text-align: left; /* 确保文本左对齐 */
  position: relative;
}

.info-value .underline::after {
  content: '';
  display: block;
  width: 100%; /* 固定下划线长度，可以根据需要调整 */
  height: 1px;
  background-color: #ccc; /* 调整下划线颜色 */
  position: absolute;
  bottom: -2px;
  left: 0;
}
</style>
